﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
  <head>
    <link rel="stylesheet" href="${ctx}/common/common.css" />
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

    <style>
      .layui-body {
        overflow-y: scroll;
      }
    </style>
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

    <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
    <script src="${ctx}/common/plugins/layuiadmin/laydate/laydate.js"></script>
    <script src="${ctx}/common/plugins/layuiadmin/layui-xtree/layui-xtree.js"></script>
  </head>
  <body>
    <!--主体内容层-->
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 layui-col-space15 layui-form">
          <form>
            <!--输入框内容盒子-->
            <div class="layui-col-md12">
              <div class="layui-col-md4">
                <label class="layui-form-label">起止时间</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    name="name"
                    id="worksheetTime"
                    readonly
                    placeholder="请选择起止时间"
                    class="layui-input"
                  />
                </div>
              </div>
              <div class="layui-col-md4">
                <label class="layui-form-label">行政区域</label>
                <div class="layui-input-block">
                  <div class="area-select-container" style="position: relative; width: 100%">
                    <div
                      id="areaDiv"
                      style="
                        display: block;
                        width: 100%;
                        height: 38px;
                        background: #fff;
                        line-height: 38px;
                        border: 1px solid #e6e6e6;
                        border-radius: 2px;
                        cursor: pointer;
                        position: relative;
                      "
                    >
                      <span style="color: #999; margin-left: 10px">请选择行政区域</span>
                    </div>
                    <i
                      class="layui-icon layui-icon-down"
                      style="
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        transition: transform 0.3s ease;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                      "
                      id="areaArrow"
                    ></i>
                    <i
                      class="layui-icon layui-icon-close"
                      style="
                        position: absolute;
                        right: 30px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                        display: none;
                        font-size: 12px;
                      "
                      id="areaClear"
                      title="清空选择"
                    ></i>
                    <input type="hidden" id="area" name="area" />
                    <div
                      class="areaTreeshow"
                      style="
                        width: 100%;
                        max-height: 300px;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background: white;
                        z-index: 1000;
                        border: 1px solid #e6e6e6;
                        border-top: none;
                        border-radius: 0 0 2px 2px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                        display: none;
                        overflow: hidden;
                        overflow-y: auto;
                      "
                    >
                      <ul id="areaTree"></ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md4">
                <label class="layui-form-label">产品类型</label>
                <div class="layui-input-block">
                  <div class="mtype-select-container" style="position: relative; width: 100%">
                    <div
                      id="mTypeDiv"
                      style="
                        display: block;
                        width: 100%;
                        height: 38px;
                        background: #fff;
                        line-height: 38px;
                        border: 1px solid #e6e6e6;
                        border-radius: 2px;
                        cursor: pointer;
                        position: relative;
                      "
                    >
                      <span style="color: #999; margin-left: 10px">请选择产品类型</span>
                    </div>
                    <i
                      class="layui-icon layui-icon-down"
                      style="
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        transition: transform 0.3s ease;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                      "
                      id="mTypeArrow"
                    ></i>
                    <i
                      class="layui-icon layui-icon-close"
                      style="
                        position: absolute;
                        right: 30px;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #999;
                        cursor: pointer;
                        pointer-events: auto;
                        z-index: 1;
                        display: none;
                        font-size: 12px;
                      "
                      id="mTypeClear"
                      title="清空选择"
                    ></i>
                    <input type="hidden" id="mType" name="mType" />
                    <div
                      class="mTypeTreeshow"
                      style="
                        width: 100%;
                        max-height: 300px;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background: white;
                        z-index: 1000;
                        border: 1px solid #e6e6e6;
                        border-top: none;
                        border-radius: 0 0 2px 2px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                        display: none;
                        overflow: hidden;
                        overflow-y: auto;
                      "
                    >
                      <ul id="mTypeTree"></ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-col-md12" style="margin-top: 5px">
              <!--输入框-->
              <div class="layui-col-md4">
                <div class="layui-input-block">
                  <input type="hidden" id="productionCompanyId" />
                  <button type="button" class="layui-btn layui-btn-warm" id="prodictionButton">生产企业</button>
                  <span style="color: red; overflow-x: hidden" id="companyName"></span>
                </div>
              </div>
            </div>

            <div class="layui-col-md12" style="padding-top: 10px; padding-bottom: 10px">
              <div style="float: right; margin-top: 3px" class="layui-btn-group paramBtn">
                <button id="reloadBillCount" type="button" class="layui-btn layui-btn-sm layui-btn-danger">查询</button>
                <button id="resetBillCount" type="reset" class="layui-btn layui-btn-sm layui-btn-danger">重置</button>
              </div>
            </div>
          </form>
          <!--通用table表格-->
          <table
            class="layui-table"
            lay-data="{ url:'${ctx}/supplier/billCount/billPage', page:true,groups:5,id:'demo1' }"
            lay-filter="demo1"
          >
            <thead>
              <tr>
                <th lay-data="{field:'goodsCode'}">销货单编号</th>
                <th lay-data="{field:'customName'}">客户</th>
                <th lay-data="{field:'productName'}">产品名称</th>
                <!-- <th lay-data="{field:'perfStandard'}">产品标准号</th>
                    <th lay-data="{field:'specifications_unit'}">规格/单位</th> -->
                <th lay-data="{field:'contacts'}">联系人</th>
                <th lay-data="{field:'phone'}">联系电话</th>
                <th lay-data="{field:'recAddress'}">收货地址</th>
                <th lay-data="{field:'orderDate',templet:'#createTime'}">订单日期</th>
                <th lay-data="{field:'goodsDetailQuantity'}">数量</th>
                <th lay-data="{field:'right',toolbar:'#barDemo',width:100}">操作</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="flowRecord">详细</a>
    </script>
    <script id="createTime" type="text/html">
      {{# return layui.getDate(d.orderDate, 'yyyy-MM-dd');}}
    </script>
  </body>
  <script>
    var $=layui.$;

    layui.use(['tree','layer','table'], function () {


    })
    layui.use(['tree','layer','table'], function () {
        var $=layui.$;
        var loading = layer.msg("数据加载中...");
        var table1 = layui.table;
        table1.render({
            done: function () {
                layer.close(loading);
            }
        })
        //监听filter为demo的table中的工具条
        table1.on('tool(demo1)', function (obj) {
            var data = obj.data;
            console.log(data)
            if (obj.event === 'pickingRecord') {//领料记录
                window.location.href="${ctx}/productionDetection/pickingRecord?workId="+data.id
            } else if (obj.event === 'technologicalProcess') {//工艺流程
                window.location.href="${ctx}/productionDetection/technological?workId="+data.id
            } else if (obj.event === 'inspectionReport') {//检验报告
                window.location.href="${ctx}/productionDetection/inspectionReport?workId="+data.id
            }else if(obj.event === 'flowRecord'){
            	window.location.href="${ctx}/supplier/billCount/toView?id="+data.goodsDetailId
            }
        });

        /* 产品类型树 */
        $('.mtype-select-container').click(function(e){
            e.stopPropagation(); // 阻止事件冒泡
            if($(".mTypeTreeshow").is(":hidden")){
                $('.mTypeTreeshow').fadeIn();
                $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(180deg)');
            } else {
                $('.mTypeTreeshow').fadeOut();
                $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            }
        });

        // 单独为箭头添加点击事件，确保箭头点击有效
        $('#mTypeArrow').click(function(e){
            e.stopPropagation();
            e.preventDefault();
            if($(".mTypeTreeshow").is(":hidden")){
                $('.mTypeTreeshow').fadeIn();
                $(this).css('transform', 'translateY(-50%) rotate(180deg)');
            } else {
                $('.mTypeTreeshow').fadeOut();
                $(this).css('transform', 'translateY(-50%) rotate(0deg)');
            }
        });

        // 清空按钮点击事件
        $('#mTypeClear').click(function(e){
            e.stopPropagation();
            e.preventDefault();
            // 清空选择
            $("#mType").val('');
            $("#mTypeDiv").html('<span style="color: #999; margin-left: 10px">请选择产品类型</span>');
            $('.mTypeTreeshow').fadeOut();
            $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            $(this).hide(); // 隐藏清空按钮
        });

        // 为产品类型树形结构添加点击事件处理，防止点击树形结构时关闭下拉框
        $('.mTypeTreeshow').click(function(e){
            e.stopPropagation(); // 阻止事件冒泡到document
        });

        // 为产品类型树形结构内的所有元素添加点击事件处理
        $(document).on('click', '.mTypeTreeshow *', function(e){
            e.stopPropagation(); // 阻止事件冒泡
        });

        layui.tree({
            elem: '#mTypeTree',
            nodes: ${mJson},
            click: function(node){
                $("#mType").val(node.id);
                $("#mTypeDiv").html('<span style="color: #333; margin-left: 10px">' + node.name + '</span>');
                $(".mTypeTreeshow").fadeOut();
                $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
                $('#mTypeClear').show(); // 显示清空按钮
            }
        });

        /* 区域树 */
        $('.area-select-container').click(function(e){
            e.stopPropagation(); // 阻止事件冒泡
            if($(".areaTreeshow").is(":hidden")){
                $('.areaTreeshow').fadeIn();
                $('#areaArrow').css('transform', 'translateY(-50%) rotate(180deg)');
            } else {
                $('.areaTreeshow').fadeOut();
                $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            }
        });

        // 单独为箭头添加点击事件，确保箭头点击有效
        $('#areaArrow').click(function(e){
            e.stopPropagation();
            e.preventDefault();
            if($(".areaTreeshow").is(":hidden")){
                $('.areaTreeshow').fadeIn();
                $(this).css('transform', 'translateY(-50%) rotate(180deg)');
            } else {
                $('.areaTreeshow').fadeOut();
                $(this).css('transform', 'translateY(-50%) rotate(0deg)');
            }
        });

        // 清空按钮点击事件
        $('#areaClear').click(function(e){
            e.stopPropagation();
            e.preventDefault();
            // 清空选择
            $("#area").val('');
            $("#areaDiv").html('<span style="color: #999; margin-left: 10px">请选择行政区域</span>');
            $('.areaTreeshow').fadeOut();
            $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            $(this).hide(); // 隐藏清空按钮
        });

        // 点击其他地方关闭下拉框
        $(document).click(function(e) {
            // 检查点击是否在行政区域下拉框容器内，包括树形结构
            if (!$(e.target).closest('.area-select-container').length &&
                !$(e.target).closest('.areaTreeshow').length) {
                $('.areaTreeshow').fadeOut();
                $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            }
            // 检查点击是否在产品类型下拉框容器内，包括树形结构
            if (!$(e.target).closest('.mtype-select-container').length &&
                !$(e.target).closest('.mTypeTreeshow').length) {
                $('.mTypeTreeshow').fadeOut();
                $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            }
        });

        // 为树形结构添加点击事件处理，防止点击树形结构时关闭下拉框
        $('.areaTreeshow').click(function(e){
            e.stopPropagation(); // 阻止事件冒泡到document
        });

        // 为树形结构内的所有元素添加点击事件处理
        $(document).on('click', '.areaTreeshow *', function(e){
            e.stopPropagation(); // 阻止事件冒泡
        });

        layui.tree({
            elem: '#areaTree',
            nodes: ${areaTree},
            click: function(node){
                $("#area").val(node.id);
                $("#areaDiv").html('<span style="color: #333; margin-left: 10px">' + node.name + '</span>');
                $(".areaTreeshow").fadeOut();
                $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
                $('#areaClear').show(); // 显示清空按钮
            }
        });
        /**
         * 条件查询中的查询按钮
         * */
        $("#reloadBillCount").on("click",function(){

        	var ids=$("#productionCompanyId").val().split(",");
        	var jsonParamStr='';
        	if(ids && ids.length>0)
        	{
        		var jsonParam=[];
        		for (var i in ids){
            		if(ids[i]){
            			jsonParam.push({id:ids[i]});
        			}
                }
        		jsonParamStr=JSON.stringify(jsonParam);
        	}
        	//这里以搜索为例
            table1.reload('demo1',{
                where: { //设定异步数据接口的额外参数，任意设
                    worksheetTime: $("#worksheetTime").val(),
                    areaId: $("#area").val(),
                    productClassifyId: $("#mType").val(),
                    jsonParam: jsonParamStr
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })
        /**
         * 重置条件查询
         * */
        $("#resetBillCount").on("click",function(){
            $("#productionCompanyId").val("")
            $("#companyName").html("")
            $("#mTypeDiv").html('<span style="color: #999; margin-left: 10px">请选择产品类型</span>');
            $("#mType").val("");
            $('.mTypeTreeshow').fadeOut();
            $('#mTypeArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            $('#mTypeClear').hide(); // 隐藏产品类型清空按钮
            $("#areaDiv").html('<span style="color: #999; margin-left: 10px">请选择行政区域</span>');
            $("#area").val("");
            $('.areaTreeshow').fadeOut();
            $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            $('#areaClear').hide(); // 隐藏行政区域清空按钮
            //这里以搜索为例
            table1.reload('demo1',{ where: { //设定异步数据接口的额外参数，任意设
                    worksheetTime: ''
                    ,productionCompanyId:''
                    ,areaId: ''
                    ,productClassifyId: ''
                    ,productionCompanyName: ''
                    ,jsonParam: ''
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

        /**
         * 点击生产企业按钮
         */
        $("#prodictionButton").on("click",function(){
            layer.open({
                type: 2,
                title: '生产企业',
                shadeClose: true,
                offset: '10px',
                shade: 0.8,
                area: ['50%', '80%'],
                content: '${ctx}/productionDetection/queryEnterpriseAll?companyIds='+$("#productionCompanyId").val() //iframe的url
            });
        })

    });




    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#worksheetTime'
            ,range: true//指定元素
        });
    });
  </script>
</html>
